$(function() {
    var line_chart = echarts.init(document.getElementById('line_chart'))
    line_chart.setOption(getLineChartOption())
})



var xtime = []
var cumsum_confirmed_cases = []
var cumsum_death_toll = []
var confirmed_cases = []
var death_toll = []

Object.keys(date_oriented).forEach(e => {
    xtime.push(e)
    cumsum_confirmed_cases.push(date_oriented[e]['cumsum_confirmed'])
    cumsum_death_toll.push(date_oriented[e]['cumsum_death'])
    confirmed_cases.push(date_oriented[e]['agg_confirmed'])
    death_toll.push(date_oriented[e]['agg_death'])
})


function getLineChartOption() {
    var option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Cumsum Confirmed Cases', 'Cumsum Death Toll', 'Confirmed Cases', 'Death Toll'],
            top: '50px',
            left: '100px',
            orient: 'vertical'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        dataZoom: [{
                //show: false,
                disabled: false,
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 0,
                end: 100
            }
            // {
            //     show: true,
            //     xAxisIndex: [0, 1],
            //     type: 'slider',
            //     bottom: 10,
            //     start: 0,
            //     end: 100
            // }
        ],
        toolbox: {
            feature: {
                // saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xtime
        },
        yAxis: {
            type: 'value'
        },
        series: [{
                name: 'Confirmed Cases',
                type: 'line',
                data: confirmed_cases
            },
            {
                name: 'Death Toll',
                type: 'line',

                data: death_toll
            },
            {
                name: 'Cumsum Confirmed Cases',
                type: 'bar',
                stack: 'agg',
                data: cumsum_confirmed_cases
            },
            {
                name: 'Cumsum Death Toll',
                type: 'bar',
                stack: 'agg',
                data: cumsum_death_toll
            },

        ]
    };
    return option
}